<template>
  <div class="bind-view">
    <div v-if="wechatData"
class="wechat-info">
      <img
:src="wechatData.avatar || '@/assets/default-avatar.png'" alt="微信头像" />
      <span>{{ wechatData.nickname }}</span>
    </div>
    <AccountBindForm :wechat-data="wechatData" />
  </div>
</template>

<script setup>
  import { defineProps } from 'vue'
  import AccountBindForm from '@/components/AccountBindForm.vue'

  const props = defineProps({
    openid: {
      type: String,
      required: true,
    },
    nickname: {
      type: String,
      default: '微信用户',
    },
    avatar: {
      type: String,
    },
  })

  const wechatData = {
    openid: props.openid,
    nickname: props.nickname,
    avatar: props.avatar,
  }
</script>

<style scoped>
  .bind-view {
    padding: 20px;
  }

  .wechat-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
  }

  .wechat-info img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 10px;
  }
</style>
